<template>
  <div class="container">
    <Card class="card">
      <p slot="title">
        注册
      </p>
      <Row :gutter="8">
        <i-col span="24">
          <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            :label-width="80"
          >
            <FormItem prop="username" label="用户名">
              <i-input
                type="text"
                v-model="formInline.username"
                placeholder="Username"
              >
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </i-input>
            </FormItem>
            <FormItem prop="password" label="密码">
              <i-input
                type="password"
                password
                v-model="formInline.password"
                placeholder="Password"
              >
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </i-input>
            </FormItem>
            <FormItem prop="rePassword" label="确认密码">
              <i-input
                type="password"
                password
                v-model="formInline.rePassword"
                placeholder="ConfirmPassword"
              >
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </i-input>
            </FormItem>
            <FormItem prop="userMail" label="邮箱">
              <i-input
                type="text"
                v-model="formInline.userMail"
                placeholder="Email"
              >
                <Icon type="ios-mail-open-outline" slot="prepend" />
              </i-input>
            </FormItem>
            <FormItem prop="userPhone" label="手机号">
              <i-input
                type="text"
                v-model="formInline.userPhone"
                placeholder="Phone"
              >
                <Icon type="ios-phone-portrait" slot="prepend" />
              </i-input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="register('formInline')"
                >注册</Button
              >
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        username: '',
        password: '',
        rePassword: '',
        userMail: '',
        userPhone: ''
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: 'Please fill in the user name',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ],
        rePassword: [
          {
            required: true,
            message: 'Please fill in the rePassword.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ],
        userMail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        userPhone: [
          {
            required: true,
            message: 'Phone cannot be empty',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    register(name) {
      const formData = {
        username: this.formInline.username,
        password: this.formInline.password,
        userMail: this.formInline.userMail,
        userPhone: this.formInline.userPhone
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formInline.password !== this.formInline.rePassword) {
            this.$Message.warning({
              content: '确认密码不正确，请重新输入',
              duration: 2,
              closable: true
            })
            return
          }
          this.$http
            .post('http://localhost:3000/user/register', formData, {
              emulateJSON: true
            })
            .then(({ body }) => {
              const { status, message } = body
              if (status === 200) {
                this.$Message.success({
                  content: message,
                  duration: 2,
                  closable: true
                })
                this.$router.push({ path: '/login' })
              }
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.container {
  padding: 0 8px;
  padding-top: 8px;
}
.card {
  width: 500px;
  margin: 0 auto;
  margin-top: 10%;
}
</style>
